<script setup>
import { useRouter, useRoute } from 'vue-router';
import { processOnlineForm } from '@/api/modules/flowForm'
import { taskApplyApi, saveDataApi, revokeTaskApi, taskDataApi } from '@/api/modules/task'
import { ElNotification } from 'element-plus'
import { getExpectedNodesApi } from '@/api/modules/processTools'
import AmountComponent from '@/components/FormCreate/pccomponents/amountComponent/index.vue'
// 引入 form-create 组件库
import FormCreate from '@form-create/element-ui';
//formcreate_api
const fApi = ref({});
//操作权限
const options = ref({
    submitBtn: false,// 隐藏提交按钮s
    resetBtn: false // 隐藏重置按钮
});
//表单值
const formData = ref({});
//业务ID
const busKey = ref();
//表单规则
const rule = ref([]);
//路由
const route = useRoute()
//流程定义id
const flowId = ref();
//流程
const flowNodeList =ref([]);
const processInstanceId = ref();
//流程表单
const flowForm = ref({
    id: '',//id
    flowInfoId: 0,//流程信息id
    versionName: '',//版本名称
    mvFormJson: [],//移动端表单
    pcFormJson: [],//PC端表单
    flowBpmnXml: '',
    lowFlowJson: '',
    processModel: {
        code: '',
        name: '',
        icon: {
            name: '',
            color: ''
        },
        process: {
            id: '',
            pid: '',
            name: '',
            type: 'start',
            executionListeners: []
        },
        enable: true,
        version: 1,
        sort: 0,
        groupId: '',
        remark: ''
    },
    createTime: '',//创建时间
    updateTime: '',//修改时间
    exist: 0,//是否删除
    state: 0
});

//设置组件
const setMenu = async () => {
    FormCreate.component('amountComponent', AmountComponent);
}

//通过流程定义查询流程表单
const getFlowFormData = async () => {
    processOnlineForm(flowId.value).then(res => {
        flowForm.value = res.data;
        rule.value = flowForm.value.pcFormJson;
        getExpectedNodes();
        if (busKey.value) {
            taskValue();
        }
    })
}

//流程预期流程
const getExpectedNodes = async () => {
    getExpectedNodesApi({
        flowInfoId: flowId.value,
        value: formData.value
    }).then(res => {
        flowNodeList.value = res.dataList;
    })
}

//数据暂存
const saveData = async () => {
    fApi.value.validate((valid, fail) => {
        if (valid === true) {
            let formValue = formData.value;
            let taskData = {
                busKey: busKey.value,
                processInstanceId: "",
                flowInfoId: flowId.value,
                value: formValue
            }
            saveDataApi(taskData).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '数据暂存成功',
                        message: '数据暂存成功',
                        type: 'success',
                    })
                }
            })
        }
    }).then(() => {
        //推荐
        console.log('Promise resolved: 表单验证通过');
    }).catch(() => {
        console.log('Promise rejected: 表单验证未通过');
    });
}

//流程撤销
const revokeTask = async () => {
    let taskData = {
        busKey: busKey.value,
        processInstanceId: "",
        flowInfoId: flowId.value,
        value: formValue
    }
    revokeTaskApi(taskData).then(res => {
        if (res.code == 200) {
            ElNotification({
                title: '流程撤销成功',
                message: '流程撤销成功',
                type: 'success',
            })
        }
    })
}
//  流程申请
const taskApply = async () => {
    fApi.value.validate((valid, fail) => {
        if (valid === true) {
            let formValue = formData.value;
            let taskData = {
                busKey: busKey.value,
                processInstanceId: "",
                flowInfoId: flowId.value,
                value: formValue
            }
            taskApplyApi(taskData).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '流程申请成功',
                        message: '流程申请成功',
                        type: 'success',
                    })
                }
            })
        }
    }).then(() => {
        //推荐
        console.log('Promise resolved: 表单验证通过');
    }).catch(() => {
        console.log('Promise rejected: 表单验证未通过');
    });
}



//获取流程值
const taskValue = async () => {
    taskDataApi(busKey.value).then(res => {
        formData.value = res.data.value;
    })
}

onMounted(() => {
    flowId.value = route.query.flowId
    busKey.value = route.query.busKey;
    getFlowFormData();
    setMenu();
})
</script>
<template>
    <div style="margin: 15px">
        <el-row>
            <el-col :span="12">
                <FormCreate :rule="rule" v-model="formData" v-model:api="fApi" :option="options" />
            </el-col>
            <el-col :span="4">
                <br/>
            </el-col>
            <el-col :span="8">
                <el-timeline style="margin: 15px;">
                    <el-timeline-item v-for="item in flowNodeList" :key="item.key" :timestamp="item.approverTime" placement="top">
                        <el-card>
                            <h4>审批节点：{{item.name}}</h4>
                            <p>审批人：{{item.approver}}</p>
                            <p>审批状态：{{item.flowMessage}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="float: right;">
                    <el-button-group>
                        <el-button type="success" @click="taskApply()">申请</el-button>
                        <el-button type="warning" @click="revokeTask()">撤销</el-button>
                        <el-button type="info" @click="saveData()">暂存</el-button>
                    </el-button-group>
                </div>
            </el-col>
        </el-row>


    </div>
</template>